<template>
  <view class="no-auth-box" v-if="!authriotyFlag">
    <img :src="noauthImg" />
    <text>无权限查看</text>
  </view>
  <view v-else>
    <view class="chart-box-one" v-if="authriotyFlagpriceindex || authriotyFlagsaleindex">
      <view class="header-wrap">
        <view class="title-wrap">
          <text class="title">价格销量指数分析</text>
          <text class="filter" v-if="authriotyFlagfilter" @click="isOpenFilterBox=true">筛选</text>
        </view>

        <view class="time-change-box">
          <view class="tag-content">
            <uni-tag class="tag-box padd1" v-for="item in rangeOne" :key="item.value" :text="item.text"
              :type="item.type" @click="clickTag(1, item.value)" />
          </view>
          <uni-datetime-picker v-if="tagType1" v-model="datetimerange1" type="daterange" rangeSeparator="-"
            @change="timeChange($event, 1)" />
          <view v-else class="uni-input" @tap="choseMothTypeDate(1)">
            <view>{{monthRange[0] || '开始日期'}}</view>
            <view class="icon">-</view>
            <view>{{monthRange[1] || '结束日期'}}</view>
          </view>
          <img :src="switchScreenImg" @click="fullScreenFn(1)" style="width:20px;height:20px;margin: 6px 0 0 6px" />
          <w-picker :visible.sync="rangeVisible" class="my-date-picker" mode="range" startYear="2017" endYear="2030"
            :value="rangeVal" :current="true" @confirm="onConfirm($event, 1)" @cancel="onCancel" ref="range"></w-picker>
        </view>
      </view>
      <!-- 价格指数 -->
      <view class="charts-box" v-if="authriotyFlagpriceindex">
        <view v-show="chartDataPriceNo" class="no-data-box">
          <img :src="noDataImg" />
          <view>暂无数据</view>
        </view>
        <echarts-uniapp v-show="!chartDataPriceNo" canvasId="FGFGFS4" :pageProgress="pricePage" :pageSize="4"
          :option="priceIndexOption"></echarts-uniapp>
      </view>
      <!-- 销量指数 -->
      <view class="charts-box" v-if="authriotyFlagsaleindex">
        <view v-show="chartDataSalesNo" class="no-data-box">
          <img :src="noDataImg" />
          <view>暂无数据</view>
        </view>
        <echarts-uniapp v-show="!chartDataSalesNo" canvasId="FGFGFS3" :pageProgress="salesPage" :pageSize="4"
          :option="salesIndexOption"></echarts-uniapp>
      </view>
      <loading v-show="showLoading1"></loading>
    </view>
    <view class="chart-box-one" v-if="authriotyFlagchgindex">
      <view class="time-change-box">
        <view class="tag-content">
          <uni-tag class="tag-box" v-for="item in rangeList" :key="item.value" :text="item.text" :type="item.type"
            @click="clickTagList(item.value)" />
        </view>
        <uni-datetime-picker v-if="tagType2" v-model="daterange" type="daterange" rangeSeparator="-"
          @change="timeChange($event, 2)" />
        <view v-else class="uni-input" @tap="choseMothTypeDate(2)">
          <view>{{monthRange2[0] || '开始日期'}}</view>
          <view class="icon">-</view>
          <view>{{monthRange2[1] || '结束日期'}}</view>
        </view>
        <img :src="switchScreenImg" @click="fullScreenFn(2)" style="width:20px;height:20px;margin: 6px 0 0 6px" />
        <w-picker :visible.sync="rangeVisible2" class="my-date-picker" mode="range" startYear="2017" endYear="2030"
          :value="rangeVal2" :current="true" @confirm="onConfirm($event, 2)" @cancel="onCancel" ref="range"></w-picker>
      </view>
      <!-- 涨跌比 -->
      <view class="charts-box">
        <view v-show="chartDataUpAndDownNo" class="no-data-box">
          <img :src="noDataImg" />
          <view>暂无数据</view>
        </view>
        <echarts-uniapp v-show="!chartDataUpAndDownNo" canvasId="FGFGFS1" :pageProgress="risePage" :pageSize="4"
          :option="stackBarIndexOption"></echarts-uniapp>
      </view>
      <loading v-show="showLoading2"></loading>
    </view>
    <view class="chart-box-one" v-if="authriotyFlagqueueindex">
      <view class="time-change-box">
        <view class="tag-content">
          <uni-tag class="tag-box padd1" v-for="item in rangeTwo" :key="item.value" :text="item.text" :type="item.type"
            @click="clickTag(2, item.value)" />
        </view>
        <uni-datetime-picker v-if="tagType3" v-model="datetimerange2" type="daterange" rangeSeparator="-"
          @change="timeChange($event, 3)" />
        <view v-else class="uni-input" @tap="choseMothTypeDate(3)">
          <view>{{monthRange3[0] || '开始日期'}}</view>
          <view class="icon">-</view>
          <view>{{monthRange3[1] || '结束日期'}}</view>
        </view>
        <img :src="switchScreenImg" @click="fullScreenFn(3)" style="width:20px;height:20px;margin: 6px 0 0 6px" />
        <w-picker :visible.sync="rangeVisible3" class="my-date-picker" mode="range" startYear="2017" endYear="2030"
          :value="rangeVal3" :current="true" @confirm="onConfirm($event, 3)" @cancel="onCancel" ref="range"></w-picker>
      </view>
      <!-- 混合-->
      <view class="charts-box" style="height: 300px">
        <view v-show="chartDataLineNo" class="no-data-box">
          <img :src="noDataImg" style="margin-top:50px" />
          <view>暂无数据</view>
        </view>
        <echarts-uniapp v-show="!chartDataLineNo" canvasId="FGFGFS2" :pageProgress="queuePage" :pageSize="4"
          :option="vehicleIndexOption" @clickItem="clickEchartItem"></echarts-uniapp>
      </view>
      <index-filter :show="isOpenFilterBox" @openChange="openChange" @filterChange="filterBoxChange"></index-filter>
      <loading v-show="showLoading3"></loading>
    </view>
  </view>
</template>

<script>
  import config from '@/config';
  import storage from '@/utils/storage';
  import { getAccessToken, removeToken } from '@/utils/auth';
  import indexFilter from '@/pages/common/index-filter/index-filter';
  import { getMenuAuth, getButtonAuth } from '@/utils/permission';
  import {
    getSalesList,
    getPriceList,
    getUpAndDownList,
    getQueueList,
    getCollieryComineLists
  } from '@/api/analysis.js';

  export default {
    components: {
      indexFilter
    },
    computed: {
      noDataImg() {
        return config.baseImgUrl + '/no-data.png';
      },
      noauthImg() {
        return config.baseImgUrl + '/no-auth.png';
      },
      switchScreenImg() {
        return config.baseImgUrl + '/switch-screen.png';
      },
    },
    data() {
      return {
        isOpenFilterBox: false,
        windowHeight: '200px',
        windowWidth: '',
        showLoading1: false,
        showLoading2: false,
        showLoading3: false,
        tagType1: true,
        tagType2: true,
        tagType3: true,
        timeType: 'day',
        raiseTimeType: 'DoD',
        queueTimeType: 'day',
        rangeVisible: false,
        rangeVisible2: false,
        rangeVisible3: false,
        monthRange: [],
        monthRange2: [],
        monthRange3: [],
        rangeVal: [],
        rangeVal2: [],
        rangeVal3: [],
        searchParam: {
          collieryId: [],
          coalId: [],
          hotVal: undefined,
          ids: []
        },
        authriotyFlag: true,
        rangeOne: [
          { value: 'hour', text: '时', type: 'default' },
          { value: 'day', text: '日', type: 'primary' },
          { value: 'month', text: '月', type: 'default' }
        ],
        rangeTwo: [
          { value: 'hour', text: '时', type: 'default' },
          { value: 'day', text: '日', type: 'primary' },
          { value: 'month', text: '月', type: 'default' }
        ],
        rangeList: [
          { value: 'DoD', text: '日环比', type: 'primary' },
          { value: 'MoM', text: '月环比', type: 'default' }
        ],
        priceIndexOption: {
          color: ['#47D9B6', '#409EFE', '#F78600', '#FF4D4F', '#8B6FFE'],
          tooltip: {
            trigger: 'axis',
            responsive: true,
            confine: true,
            axisPointer: {
              type: 'line',
              axis: 'auto',
              snap: true
            },
            textStyle: {
              testShadowColor: 'transparent',
              textShadowBlur: 10
            },
            padding: 5
          },
          legend: {
            top: 20,
            padding: 0,
            itemWidth: 13,
            itemHeight: 7,
            textStyle: {
              fontSize: 9
            },
            data: []
          },
          grid: {
            left: '5%',
            right: '2%',
            top: '35%',
            bottom: '2%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            axisLabel: {
              interval: 0,
              color: '#666666',
              fontSize: 10,
            },
            axisLine: {
              lineStyle: {
                color: '#D9D9D9',
                width: 1
              },
              onZero: false
            },
            data: []
          },
          yAxis: {
            min: 0,
            type: 'value',
            name: '单位：元',
            nameTextStyle: {
              align: 'left',
              padding: [0, 0, 0, -20]
            },
            minInterval: 1,
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed'
              }
            },
            axisLabel: {
              color: '#666666',
              fontSize: 10,
            },
            axisLine: {
              show: true
            },
          },
          series: [],
          dataZoom: []
        },
        salesIndexOption: {
          color: ['#47D9B6', '#409EFE', '#F78600', '#FF4D4F', '#8B6FFE'],
          tooltip: {
            trigger: 'axis',
            responsive: true,
            confine: true,
            axisPointer: {
              type: 'line',
              axis: 'auto',
              snap: true
            },
            textStyle: {
              testShadowColor: 'transparent',
              textShadowBlur: 10
            },
            padding: 5
          },
          legend: {
            top: 20,
            padding: 0,
            itemWidth: 13,
            itemHeight: 7,
            textStyle: {
              fontSize: 9
            },
            data: []
          },
          grid: {
            left: '5%',
            right: '2%',
            top: '35%',
            bottom: '2%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            axisLabel: {
              interval: 0,
              color: '#666666',
              fontSize: 10,
            },
            axisLine: {
              lineStyle: {
                color: '#D9D9D9',
                width: 1
              },
              onZero: false
            },
            data: []
          },
          yAxis: {
            min: 0,
            type: 'value',
            name: '单位：万吨',
            nameTextStyle: {
              align: 'left',
              padding: [0, 0, 0, -20]
            },
            minInterval: 1,
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed'
              }
            },
            axisLabel: {
              color: '#666666',
              fontSize: 10,
            },
            axisLine: {
              show: true
            },
          },
          series: [],
          dataZoom: []
        },
        stackBarIndexOption: {
          color: ['#FB6567', '#47D9B6'],
          tooltip: {
            trigger: 'axis',
            responsive: true,
            confine: true,
            axisPointer: {
              type: 'line',
              axis: 'auto',
              snap: true
            },
            textStyle: {
              testShadowColor: 'transparent',
              textShadowBlur: 10
            },
            padding: 5
          },
          legend: {
            top: 20,
            padding: 0,
            itemWidth: 13,
            itemHeight: 7,
            textStyle: {
              fontSize: 9
            },
            data: []
          },
          grid: {
            left: '5%',
            right: '2%',
            top: '33%',
            bottom: '2%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            axisLabel: {
              interval: 0,
              color: '#666666',
              fontSize: 10,
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#D9D9D9',
                width: 1
              },
              onZero: false
            },
            data: []
          },
          yAxis: {
            max: 100,
            min: -100,
            type: 'value',
            name: '单位：万吨',
            nameTextStyle: {
              align: 'left',
              padding: [0, 0, 0, -20]
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed'
              }
            },
            axisLabel: {
              color: '#666666',
              fontSize: 10,
            },
            axisLine: {
              show: true
            },
          },
          series: [],
          dataZoom: []
        },
        vehicleIndexOption: {
          color: ['#409EFE', '#FF4D4F'],
          tooltip: {
            trigger: 'axis',
            responsive: true,
            confine: true,
            axisPointer: {
              type: 'shadow',
              axis: 'auto',
              snap: true
            },
            textStyle: {
              testShadowColor: 'transparent',
              textShadowBlur: 10
            },
            padding: 5
          },
          legend: {
            top: 20,
            padding: 0,
            itemWidth: 13,
            itemHeight: 7,
            textStyle: {
              fontSize: 9
            },
            data: []
          },
          grid: {
            left: '5%',
            right: '5%',
            top: '25%',
            bottom: '2%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            axisLabel: {
              interval: 0,
              color: '#666666',
              fontSize: 10,
            },
            axisLine: {
              lineStyle: {
                color: '#D9D9D9',
                width: 1
              },
              onZero: false
            },
            data: []
          },
          yAxis: [
            {
              min: 0,
              type: 'value',
              name: '车辆数',
              nameTextStyle: {
                align: 'left',
                padding: [0, 0, 0, -20]
              },
              minInterval: 1,
              splitLine: {
                show: true,
                lineStyle: {
                  type: 'dashed'
                }
              },
              axisLabel: {
                color: '#666666',
                fontSize: 10,
              },
              axisLine: {
                show: true
              },
            },
            {
              min: 0,
              type: 'value',
              name: '时间(分)',
              nameTextStyle: {
                align: 'right',
                padding: [0, -20, 0, 0]
              },
              minInterval: 1,
              splitLine: {
                show: true,
                lineStyle: {
                  type: 'dashed'
                }
              },
              axisLabel: {
                color: '#666666',
                fontSize: 10,
              },
              axisLine: {
                show: true
              },
            }
          ],
          series: [],
          dataZoom: []
        },
        datetimerange1: [],
        datetimerange2: [],
        daterange: [],
        chartDataLine: {},
        chartDataUpAndDown: {},
        chartDataPrice: {},
        chartDataSales: {},
        chartDataLineNo: false,
        chartDataPriceNo: false,
        chartDataSalesNo: false,
        chartDataUpAndDownNo: false,
        authriotyFlagchgindex: true,
        authriotyFlagsaleindex: true,
        authriotyFlagqueueindex: true,
        authriotyFlagfilter: true,
        authriotyFlagpriceindex: true,
        pricePage: 0,
        salesPage: 0,
        risePage: 0,
        queuePage: 0
      };
    },
    onReady() {
      const now = new Date()
      const date = new Date(new Date() - 1000 * 60 * 60 * 24 * 7);
      const currentDate = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`
      this.rangeVal = this.rangeVal2 = this.rangeVal3 = [currentDate, currentDate];
      const endDate = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
      this.daterange = this.datetimerange1 = this.datetimerange2 = [endDate, currentDate];
      this.getMenuAuth();
    },
    methods: {
      openChange(data) {
        this[data.key] = data.show;
      },
      fullScreenFn(type) {
        switch (type) {
          case 1:
            this.$tab.reLaunch('/packageA/pages/work/indexAnalysis');
            break;
          case 2:
            this.$tab.reLaunch('/packageA/pages/work/riseFallAnalysis');
            break;
          case 3:
            this.$tab.reLaunch('/packageA/pages/work/vehicleNumAnalysis');
            break;
          default: break
        }
      },
      choseMothTypeDate(type) {
        if (type === 1) {
          this.rangeVisible = true;
          return
        }
        if (type === 2) {
          this.rangeVisible2 = true;
          return
        }
        if (type === 3) {
          this.rangeVisible3 = true;
          return
        }
      },
      onConfirm(res, type) {
        const startMonth = `${res.obj.fyear}-${this.getFullString(res.obj.fmonth)}`
        const endMonth = `${res.obj.tyear}-${this.getFullString(res.obj.tmonth)}`
        if (type === 1) {
          this.monthRange = [startMonth, endMonth]
          this.rangeVal = res.value
          this.getFoldLineData();
        } else if (type == 2) {
          this.monthRange2 = [startMonth, endMonth]
          this.getRiseAndFallData();
        } else {
          this.monthRange3 = [startMonth, endMonth]
          this.getPriceData();
        }
      },
      getFullString(value) {
        if (value.length === 1) {
          return `0${value}`
        }
        if (value.length === 2) {
          return value
        }
        return value
      },
      onCancel() {
        this.rangeVisible = false;
        this.rangeVisible2 = false
        this.rangeVisible3 = false
      },
      clickEchartItem(e) {
        if (!e) {
          return
        }
        const name = e.replace(/\n\r/g, '')
        this.$tab.reLaunch(`/packageA/pages/work/collieryDetail?name=${name}`);
      },
      filterBoxChange(data) {
        this.searchParam = data
        this.getFoldLineData();
      },
      clickTag(flag, type) {
        if (flag == 1) {
          if (type === 'month') {
            this.tagType1 = false;
          } else {
            this.tagType1 = true;
          }
          this.timeType = type;
          this.monthRange = []
          this.datetimerange1 = [];
          this.getFoldLineData();
          this.rangeOne = this.handleRange(this.rangeOne, type)
        } else {
          if (type === 'month') {
            this.tagType3 = false;
          } else {
            this.tagType3 = true;
          }
          this.queueTimeType = type
          this.monthRange3 = []
          this.datetimerange2 = [];
          this.getPriceData();
          this.rangeTwo = this.handleRange(this.rangeTwo, type)
        }
      },
      handleRange(list, type) {
        return list.map(item => {
          if (item.value === type) {
            item.type = 'primary';
          } else {
            item.type = 'default';
          }
          return item
        });
      },
      // 获取登录状态
      async getLoginStatus() {
        if (getAccessToken()) {
          //已经登录
          this.getMenuAuth();
        } else {
          //没登陆 获取租户列表看是否以前注册过
          showConfirm('检测到当前未登录，是否登录?').then((res) => {
            removeToken();
            storage.clean();
            if (res.confirm) {
              uni.reLaunch({
                url: '/packageA/pages/login'
              });
            }
          });
        }
      },
      clickTagList(type) {
        this.raiseTimeType = type
        if (type === 'MoM') {
          this.tagType2 = false;
        } else {
          this.tagType2 = true;
        }
        this.daterange = []
        this.monthRange2 = []
        this.getRiseAndFallData();
        this.rangeList = this.handleRange(this.rangeList, type)
      },
      timeChange(timeRange, type) {
        if (type === 1) {
          this.datetimerange1 = timeRange
          this.getFoldLineData()
          return
        }
        if (type === 2) {
          this.daterange = timeRange
          this.getRiseAndFallData()
          return
        }
        if (type === 3) {
          this.datetimerange2 = timeRange
          this.getPriceData()
          return
        }
      },
      //涨跌
      async getRiseAndFallData() {
        const data = {
          timeDimension: this.raiseTimeType,
        }
        if (this.tagType2) {
          if (this.daterange.length) {
            data['startTime'] = `${this.getFullDate(this.daterange[0])} 00:00:00`
            data['endTime'] = `${this.getFullDate(this.daterange[1])} 00:00:00`
          }
        } else {
          if (this.monthRange2.length) {
            data['startTime'] = `${this.monthRange2[0]}-01 00:00:00`
            data['endTime'] = `${this.monthRange2[1]}-01 00:00:00`
          }
        }
        this.showLoading2 = true
        const res = await getUpAndDownList(data);
        if (res.code !== 0) {
          this.chartDataUpAndDownNo = true
          this.showLoading2 = false
          return
        }
        const result = res?.data?.raiseFallIndexList || []
        if (!result.length) {
          this.chartDataUpAndDownNo = true
          this.showLoading2 = false
          return
        }
        const xAxisList = result.map(e => e.time) || []
        this.risePage = Number((100 / xAxisList.length).toFixed(2))
        this.stackBarIndexOption.legend.data = ['上涨', '下跌']
        this.stackBarIndexOption.xAxis.data = xAxisList
        this.stackBarIndexOption.series = [
          {
            name: '上涨',
            type: 'bar',
            stack: 'Total',
            data: result.map(e => +e.priceRaisePercentage.slice(0, -1))
          }, {
            name: '下跌',
            type: 'bar',
            stack: 'Total',
            data: result.map(e => -e.priceFallPercentage.slice(0, -1))
          }
        ]
        let start = 0;
        if (xAxisList.length > 4) {
          start = 100 - this.risePage * 3;
        }
        this.stackBarIndexOption.dataZoom = [{
          show: true,
          height: 0,
          bottom: 0,
          start: start,
          end: 100
        }]
        this.chartDataUpAndDownNo = false;
        this.showLoading2 = false
      },
      //折线图
      async getFoldLineData() {
        this.getPriceList()
        this.getSalesList()
      },
      getParams() {
        const data = {
          timeDimension: this.timeType,
          hasCondition: false,
          coalBasicIds: this.searchParam.ids,
        }
        if (this.tagType1) {
          if (this.datetimerange1.length) {
            data['startTime'] = `${this.getFullDate(this.datetimerange1[0])} 00:00:00`
            data['endTime'] = `${this.getFullDate(this.datetimerange1[1])} 00:00:00`
          }
        } else {
          if (this.monthRange.length) {
            data['startTime'] = `${this.monthRange[0]}-01 00:00:00`
            data['endTime'] = `${this.monthRange[1]}-01 00:00:00`
          }
        }
        return data
      },
      getFullDate(date) {
        const dateList = date.split('-')
        return `${dateList[0]}-${this.getFullString(dateList[1])}-${this.getFullString(dateList[2])}`
      },
      async getPriceList() {
        const data = this.getParams()
        if (this.searchParam.hotVal) {
          data['calorificValue'] = this.searchParam.hotVal
        }
        this.showLoading1 = true
        const res = await getPriceList(data);
        if (res.code !== 0) {
          this.chartDataPriceNo = true;
          this.showLoading1 = false
          return
        }
        const result = res?.data?.classifyList || []
        if (!result.length) {
          this.chartDataPriceNo = true;
          this.showLoading1 = false
          return
        }
        const priceIndexVoList = result[0].priceIndexVoList || []
        const xAxisList = priceIndexVoList.map(e => e.time) || []
        this.pricePage = Number((100 / xAxisList.length).toFixed(2))
        this.priceIndexOption.legend.data = result.map(e => e.classifyName) || []
        this.priceIndexOption.xAxis.data = xAxisList
        this.priceIndexOption.series = result.map(e => {
          const priceList = e.priceIndexVoList || []
          return {
            type: 'line',
            name: e.classifyName,
            data: priceList.map(e => e.obversionPrice)
          }
        })
        let start = 0;
        if (xAxisList.length > 4) {
          start = 100 - this.pricePage * 3;
        }
        this.priceIndexOption.dataZoom = [{
          show: true,
          height: 0,
          bottom: 0,
          start: start,
          end: 100
        }]
        this.chartDataPriceNo = false
        this.showLoading1 = false
      },
      async getSalesList() {
        const data = this.getParams()
        this.showLoading1 = true
        const res = await getSalesList(data);
        if (res.code !== 0) {
          this.chartDataSalesNo = true;
          this.showLoading1 = false
          return
        }
        const result = res.data.classifyList || []
        if (!result.length) {
          this.chartDataSalesNo = true;
          this.showLoading1 = false
          return
        }
        const salesIndexVoList = result[0].salesIndexVoList || []
        const xAxisList = salesIndexVoList.map(e => e.time) || []
        this.salesPage = Number((100 / xAxisList.length).toFixed(2))
        this.salesIndexOption.legend.data = result.map(e => e.classifyName) || []
        this.salesIndexOption.xAxis.data = xAxisList
        this.salesIndexOption.series = result.map(e => {
          const salesList = e.salesIndexVoList || []
          return {
            type: 'line',
            name: e.classifyName,
            data: salesList.map(e => e.salesVolume)
          }
        })
        let start = 0;
        if (xAxisList.length > 4) {
          start = 100 - this.salesPage * 3;
        }
        this.salesIndexOption.dataZoom = [{
          show: true,
          height: 0,
          bottom: 0,
          start: start,
          end: 100
        }]
        this.chartDataSalesNo = false;
        this.showLoading1 = false
      },
      async getMenuAuth() {
        const auth = await getMenuAuth('analysis');
        if (auth) {
          this.authriotyFlag = true;
          this.getFoldLineData();
          this.getPriceData();
          this.getRiseAndFallData();
          this.getButtonAuth();
        } else {
          this.authriotyFlag = false;
        }
      },
      async getButtonAuth() {
        const authMarksMap = {
          'govern:analyse:chgindex': 'authriotyFlagchgindex',
          'govern:analyse:saleindex': 'authriotyFlagsaleindex',
          'govern:analyse:queueindex': 'authriotyFlagqueueindex',
          'govern:analyse:filter': 'authriotyFlagfilter',
          'govern:analyse:priceindex': 'authriotyFlagpriceindex'
        };
        const buttonAuths = await getButtonAuth(Object.keys(authMarksMap));
        buttonAuths.forEach((key) => {
          this[authMarksMap[key]] = true;
        });
      },
      //排队指数
      async getPriceData() {
        const data = {
          timeDimension: this.queueTimeType
        }
        if (this.tagType3) {
          if (this.datetimerange2.length) {
            data['startTime'] = `${this.getFullDate(this.datetimerange2[0])} 00:00:00`
            data['endTime'] = `${this.getFullDate(this.datetimerange2[1])} 00:00:00`
          }
        } else {
          if (this.monthRange3.length) {
            data['startTime'] = `${this.monthRange3[0]}-01 00:00:00`
            data['endTime'] = `${this.monthRange3[1]}-01 00:00:00`
          }
        }
        this.showLoading3 = true
        const res = await getQueueList(data);
        if (res.code !== 0) {
          this.chartDataLineNo = true
          this.showLoading3 = false
          return
        }
        const result = res.data.queueIndexList || []
        if (!result.length) {
          this.chartDataLineNo = true
          this.showLoading3 = false
          return
        }
        this.vehicleIndexOption.legend.data = ['车辆', '时间']
        const xAxisList = this.handleCollieryName(result)
        this.queuePage = Number((100 / xAxisList.length).toFixed(2))
        this.vehicleIndexOption.xAxis.data = xAxisList
        this.vehicleIndexOption.series = [
          {
            name: '车辆',
            type: 'bar',
            yAxisIndex: 0,
            data: result.map(e => e.queueCarNumber)
          }, {
            name: '时间',
            type: 'line',
            yAxisIndex: 1,
            data: result.map(e => e.queueTime)
          }
        ]
        let start = 0;
        if (xAxisList.length > 4) {
          start = 100 - this.queuePage * 3;
        }
        this.vehicleIndexOption.dataZoom = [{
          show: true,
          height: 0,
          bottom: 0,
          start: start,
          end: 100
        }]
        this.chartDataLineNo = false
        this.showLoading3 = false
      },
      handleCollieryName(result) {
        return result.map(e => {
          const name = e.collieryName
          if (e.collieryName.length > 5) {
            return this.insertChartForString(e.collieryName)
          } else {
            return e.collieryName
          }
        })
      },
      insertChartForString(str) {
        const regex = new RegExp('.{1,5}', 'g');
        return str.replace(regex, (match) => {
          return match + '\n\r';
        });
      }
    },
    onPullDownRefresh() {
      wx.stopPullDownRefresh();
    }
  };
</script>

<style lang="scss" scoped>
  .viewscroll {
    height: 257px;
  }

  .chart-box-one {
    position: relative;
    background: #fff;
    padding: 10px;
    margin: 10px;
    width: 96%;
    overflow: hidden;
    border-radius: 8px;

    .header-wrap {
      .title-wrap {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;

        text.title {
          font-size: 15px;
          font-weight: 600;
        }

        text.filter {
          color: #409EFE;
        }
      }
    }

    .tag-content {
      margin-right: 10px;

      .tag-box+.tag-box {
        margin-left: 6px;
      }
    }


  }

  .time-pick {
    border: 1px solid #e5e5e5;
    padding: 6px 0px;
    border-radius: 5px;
    margin-left: 5px;
  }

  .example-box {
    display: flex;
  }

  .charts-content {
    background: #fff;
  }

  .search-box {
    padding: 0 8px;
  }

  .time-change-box {
    width: 100%;
    padding: 3px;
    padding-bottom: 10px;
    border-bottom: 1px solid #E6E6E6;

    .til {
      width: 80rpx;
      float: left;
      margin-top: 9px;
      position: relative;
    }

    .uni-input {
      width: 400rpx;
      height: 32px;
      line-height: 1;
      font-size: 14px;
      border-radius: 5px;
      padding: 0px 11px 0 11px;
      word-spacing: 15px;
      line-height: 32px;
      border-radius: 5px;
      border: 1px solid #eee;
      display: flex;
      justify-content: space-around;
    }

    .range-date {
      width: 187px;
      height: 32px;
      display: inline-block;
      border: 1px solid #eee;
      float: left;
      margin-right: 6px;
    }

    button {
      position: absolute;
      right: 6px;
      top: -6px;
    }
  }

  .charts-box {
    width: 100%;
    height: 220px;
    text-align: center;

    .no-data-box {
      padding-top: 20px;
      text-align: center;

      >view {
        margin-top: 10px;
      }
    }

    image {
      height: 150px;
      width: 226px;
    }

    .chart-title:before {
      content: '';
      display: block;
      top: 1px;
      border-radius: 10px;
      background-color: #0ea8e4;
      width: 5px;
      height: 20px;
      position: absolute;
      top: 10px;
      left: -12px;
    }

    .chart-title {
      font-size: 20px;
      color: #1f2f3d;
      margin-left: 20px;
      line-height: 40px;
      font-weight: 700;
      white-space: nowrap;
      position: relative;
    }
  }
</style>